<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav clearfix">
        <!-- 左边部分 -->
        <div class="navleft clearfix">
          <a href="javasxript:;" class="icon">
            <img src="../assets/img/bmz/zh.png" alt />
          </a>
          <a href="javascript:;" class="iconcopy">LIVE</a>
        </div>
        <!-- 右边部分 -->
        <div class="navright clearfix">
          <a href="javascript:;" class="clair">
            <img src="../assets/img/bmz/sd.png" alt class="jz" />
            全部 Live 讲座
          </a>
          <a href="javascript:;" class="handping">
            <img src="../assets/img/bmz/rmjx.png" alt class="rmjx" />
            热门精选
          </a>
          <a href="javascript:;" class="handping">
            <img src="../assets/img/bmz/00.jpg" alt class="me" />
            我的
          </a>
        </div>
    </div>
    <!-- 下面的 -->
    <div class="business clearfix">
      <!-- 左边的 -->
      <div class="business-left clearfix">
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/n1.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              「不孕不育」谣言多，妇产科博士带你看清真相
              大力
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />生活方式
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/n1.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              带你逐层破解“多囊卵巢综合征”
              <br />大力
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />医学健康
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 图片 -->
        <img src="../assets/img/bmz/xw.png" alt />
        <!-- 图片 -->
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/x3.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              耳机发烧少走弯路！耳机选购指南
              <br />鬼斧神工119
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />生活方式
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/x4.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              习惯与计划，高效人士的必修课
              <br />FreeGrit潇洒毅行
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />教育
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/x5.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              如何矫正不良步态？
              <br />康复师 于老师
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />体育
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/x6.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              摆脱过敏性鼻炎：治疗、药物和预防复发
              <br />李鸿政
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />医学健康
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/x7.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              搜狗输入法之父战胜拖延症（行动篇）
              <br />马占凯
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />生活方式
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
        <!-- 每个 -->
        <div class="metre">
          <div class="metre-left">
            <img src="../assets/img/bmz/n1.jpg" alt />
          </div>
          <div class="metre-right">
            <a href="javascript:;" class="fina">
              对付「牙疼」你需要知道的所有事
              <br />朱王勇
            </a>
            <span class="finmy">
              <span class="way">
                <img src="../assets/img/bmz/shfs.png" alt />医学健康
              </span>
              <a href="javascript:;" class="start">
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
                <i class="el-icon-star-on"></i>
              </a>
            </span>
          </div>
        </div>
      </div>
      <!-- 右边的 -->
      <div class="business-right clearfix">
        <div class="chair">
          <a>知乎 Live 讲座是什么？</a>
          <span>知乎 Live 讲座是知乎推出的实时语音问答产品。讲者对某个主题分享知识、经验或见解，听众可以实时提问并获得解答。让你便捷且高效地收获与交流。</span>
        </div>
        <div class="download">
          <a>下载知乎 App</a>
          <span>提供友好便捷的 Live 讲座体验</span>
          <img src="../assets/img/bmz/zb.svg" alt class="zb" />
        </div>
        <div class="ewmzh">
          <img src="../assets/img/bmz/ewm.png" alt />
          <p>扫描二维码下载知乎 App</p>
          <img src="../assets/img/bmz/xjiao.png" alt id="xiaoj" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 清除浮动
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.nav {
    width: 100%;
    height: 50px;
    background-color: hsla(0,0%,100%,.96)!important;
    position: fixed;
    top: 0px;
}
.navleft {
  width: 200px;
  height: 100%;
  float: left;
}
.navright {
  width: 385px;
  height: 100%;
  float: right;
  line-height: 47px;
}
.navright .jz {
  position: relative;
  top: 5px;
  width: 20px;
  margin-right: 3px;
}
.rmjx {
  position: relative;
  top: 3px;
  width: 20px;
  margin-left: 25px;
}
.icon img {
  width: 53px;
  position: relative;
  top: 11px;
  margin-left: 29px;
}
.me {
  width: 21px;
  border-radius: 50%;
  position: relative;
  top: 6px;
  margin-right: 5px;
  margin-left: 25px;
}
.iconcopy {
  font-size: 18px;
  display: block;
  margin-left: 85px;
  margin-top: -17px;
  width: 35px;
  background-color: #1185fe;
  color: #fff;
  font-weight: 300;
}
.clair {
  color: #1185fe;
}
.handping {
  color: #8585a2;
}
.business {
    width: 1000px;
    margin: auto;
    margin-top: 49px;
}
.business-left {
  width: 600px;
  height: 963px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 5px;
  float: left;
}
.business-right {
  width: 320px;
  height: 218px;
  background-color: #fff;
  border-radius: 5px;
  float: left;
  margin: 10px 0 0 11px;
}
.metre {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #f9f9f9;
}
.metre-left {
  width: 68px;
  height: 68px;
  margin: 14px 0 0 15px;
  border-radius: 5px;
  float: left;
}
.metre-right {
  width: 84%;
  height: 70px;
  float: left;
  margin: 14px 0 0 9px;
}
.fina {
  display: block;
  width: 350px;
}
.finmy {
  display: block;
  width: 350px;
  height: 28px;
}
.way {
  display: block;
  width: 76px;
  border: 1px solid #adadbc;
  height: 19px;
  margin-top: 7px;
  border-radius: 3px;
  float: left;
  font-size: 12px;
  color: #adadbc;
}
.start {
  width: 80px;
  height: 20px;
  float: left;
  margin-left: 11px;
  margin-top: 7px;
  i {
    color: #ffab2e;
  }
}
.way img {
  position: relative;
  top: 3px;
  margin-left: 4px;
  margin-right: 3px;
}
.chair {
  width: 290px;
  height: 110px;
  border-bottom: 1px solid #f9f9f9;
  padding: 15px;
  a {
    display: block;
    margin-bottom: 8px;
    color: #444444;
    font-size: 15px;
  }
  span {
    color: #646464;
    font-size: 14px;
  }
}
.download {
  padding: 15px;
  a {
    display: block;
    margin-bottom: 8px;
    color: #444444;
    font-size: 15px;
  }
  span {
    color: #646464;
    font-size: 14px;
  }
}
.zb {
  width: 40px;
  height: 40px;
  float: right;
  margin-top: -23px;
}
.ewmzh {
  //   position: absolute;
  width: 318px;
  height: 172px;
  background-color: #ffffff;
  border-radius: 5px;
  //   display: block;
}
.ewmzh img {
  width: 115px;
  height: 115px;
  margin-left: 95px;
  margin-top: 15px;
}
.ewmzh p {
  color: #646464;
  margin-left: 73px;
  font-size: 15px;
  margin-top: 5px;
}
.download:hover {
  background-color: #1185fe;
}
#xiaoj {
  width: 12px;
  height: 12px;
  position: relative;
  top: -201px;
  left: 48px;
}
</style>